<template>
  <div class="app-container mod-hot-search">
    <el-button
      type="primary"
      style="float: right; margin-right: 50px"
      @click="gohistory()"
    >
      历史售卖
    </el-button>
    <div class="main">
      <div class="left">
        <div class="magb">吧台编号：<span>{{detailObj.number}}</span></div>
        <div class="magb">吧台类型：<span>{{detailObj.type == 1 ? '自营' : '联营'}}</span></div>
        <div class="magb">吧台型号：<span>{{detailObj.model}}</span></div>
        <div class="magb">吧台货柜：<span>{{detailObj && detailObj.barCounterContainerDTOList && detailObj.barCounterContainerDTOList.length}}（柜）</span></div>
      </div>
      <div class="right">
        <div class="magb">投放区域：<span>{{detailObj.barCounterRegion}}</span></div>
        <div class="magb">状 态 ：<span>{{detailObj.status}}</span></div>
        <div class="magb">投放时间：<span>{{detailObj.createTime}}</span></div>
        <div class="magb">商品数量：<span>{{shoplen}}</span></div>
      </div>
    </div>
    <div class="container">
      <el-radio-group style="margin-bottom: 30px" v-model="selectedValue" @change="change">
        <el-radio-button
          v-for="(item, index) in detailObj.barCounterContainerDTOList"
          :key="index"
          :label="item.barCounterContainerId"
          >{{ item.region }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- 货柜编号 -->
      <el-table-column label="货柜编号" prop="barCounterContainerId" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.barCounterContainerId }}</span>
        </template>
      </el-table-column>
      <!-- 类型 -->
      <el-table-column label="类型" prop="categoryName" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.categoryName }}</span>
        </template>
      </el-table-column>
      <!-- 所属商品 -->
      <el-table-column label="所属商品" prop="name" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <!-- 售价 -->
      <el-table-column label="售价" prop="marketPriceFee" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.priceFee }}</span>
        </template>
      </el-table-column>
      <!-- 销量 -->
      <el-table-column label="销量" prop="salesVolume" align="center">
        <template slot-scope="{ row }">
          <span>{{ (row.barSkuVoList && row.barSkuVoList.length > 0) ? row.barSkuVoList[0].salesVolume ? row.barSkuVoList[0].salesVolume: '0' : '' }}</span>
        </template>
      </el-table-column>
      <!-- 当前库存 -->
      <el-table-column label="当前库存" prop="stock" align="center">
        <template slot-scope="{ row }">
          <span>{{ (row.barSkuVoList && row.barSkuVoList.length > 0) ? row.barSkuVoList[0].stock : '' }}</span>
        </template>
      </el-table-column>
      <!-- 预警线 -->
      <el-table-column label="预警线" prop="alermLine" align="center">
        <template slot-scope="{ row }">
          <span>{{ (row.barSkuVoList && row.barSkuVoList.length > 0) ? row.barSkuVoList[0].alermLine : '' }}</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status == 1 ? '上架' : '下架' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination
      v-show="pageVO.total > 0"
      :total="pageVO.total"
      :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize"
      @pagination="getPage()"
    />
    <history v-if="historyVisible" ref="historyS" :barCounterId="$route.query.barCounterId" />
  </div>
</template>
    
    <script>
import permission from "@/directive/permission/index.js";
import Pagination from "@/components/Pagination";
import * as api from "@/api/selfoperated/index";
import history from "./history.vue";

export default {
  name: "",
  components: { Pagination, history },
  directives: { permission },
  data() {
    return {
      pageLoading: false,
      historyVisible: false,
      selectedValue: "",
      shoplen: '',
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
        title: null,
        content: null,
        status: null,
        shopId: null,
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      },
      barCounterId: '',
      detailObj: {}
    };
  },
  mounted() {
    this.barCounterId = this.$route.query.barCounterId
    this.getPage();
  },
  methods: {
    gohistory() {
      this.historyVisible = true;
      this.$nextTick(() => {
        this.$refs.historyS.init(this.$route.query.barCounterId);
      });
    },
    async getPage() {
      this.pageLoading = true;
      await api.getById({barCounterId: this.barCounterId}).then((res) => {
        this.detailObj = res
        this.selectedValue = res.barCounterContainerDTOList[0].barCounterContainerId
      });
      api.barCounterContainerPage({ ...this.pageQuery, barCounterId: this.barCounterId }).then(res=>{
        this.shoplen = res.total
      })
      await this.getContainerList()
    },
    getContainerList() {
      api.barCounterContainerPage({ ...this.pageQuery, barCounterId: this.barCounterId, barCounterContainerId: this.selectedValue }).then((pageVO) => {
        this.pageVO = pageVO;
        this.pageLoading = false;
      });
    },
    change(e) {
      this.getContainerList()
      console.log(e, '================>e')
    }
  },
};
</script>
    
  <style lang="scss" scoped>
.main {
  display: flex;
  margin-top: 20px;
  span {
    font-weight: 600;
  }
  .left {
    margin-right: 200px;
  }
  .magb {
    margin-bottom: 30px;
  }
}
.container {
  ::v-deep .el-radio-button__inner {
    width: 90px;
    border: 1px solid #0057f8;
    font-weight: 600;
  }
}
</style>
    